<template>
  <div>
    <div class="icon-head">
      <a href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/icon.html" class="aas">Add and se</a>
    </div>
    <el-tabs type="border-card" v-model="activeName">
      <el-tab-pane label="图标" name="one">
        <div class="icon-container">
            <div class="icon-box" v-for="(item, index) in elementIcon" :key="index">
              <el-tooltip :content="item" placement="top">
                <div class="icon-content">
                  <i style="color: #409EFF;" class="icons-icon" :class="'el-icon-' + item"></i>
                  <p class="icon-name">{{item}}</p>
                </div>
              </el-tooltip>
            </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="Element-UI-Icon" name='two'>
        <div class="icon-container">
            <div class="icon-box" v-for="(item, index) in elementIcon" :key="index">
              <el-tooltip :content="item" placement="top">
                <div class="icon-content">
                  <i class="icons-icon" :class="'el-icon-' + item"></i>
                  <i class=""></i>
                  <p class="icon-name">{{item}}</p>
                </div>
              </el-tooltip>
            </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import elementIcon from './element-icons.js'
export default {
  data() {
    return {
      elementIcon,
      activeName: 'one'
    }
  }
}
</script>

<style lang="less" scoped>
  .icon-head {
    margin: 0 5px;
    padding: 0 10px;
    height: 40px;
    line-height: 40px;
    background-color: #eee;
  }
  .aas {
    color: #434343;
    text-decoration: none;
  }
  .aas:hover {
    color: #409EFF;
  }
  .el-tabs {
    margin: 20px 5px;
    background-color: #fff;
  }
  .icon-container {
    display: flex;
    flex-wrap: wrap;
  }
  .icon-box {
    width: 11.1%;
    margin: 10px 0;
  }
  .icon-content {
    height: 100%;
    width: 100%;
    text-align: center;
  }
  .icons-icon {
    font-size: 26px;
    margin: 20px 0;
  }
  .icon-name{
    font-size: 16px;
  }
</style>
